import { useState, useEffect } from "react";
import styles from "./index.module.css";
import { Form, Radio, Card, Box, /* Icon */ } from "@alicloudfe/components";

const RadioGroup = Radio.Group;
import protocolData from "@/config/protocol.json";



interface IConditions {
  [propsName: string]: string | undefined; // key 为 StringNumber
}

interface IItem {      //每条协议
  name: string;        //协议名称
  version?: string;    //协议版本
  description?: string;//协议描述
  href?: string;       //仓库位置
  conditionsConfig: { [propsName: string]: '0' | '1' | undefined }; // 协议条件设置 每条协议 对应选择 0：否 1：是
  [propsName: string]: unknown;
}

const rawData = protocolData as {
  conditions: IConditions;
  protocol: IItem[];
};

/**
 * 所有问题key
 */
const questionKeys: string[] = Object.keys(rawData.conditions);

function ProtocolSelect() {
  /**
   * 表单数据初始项
   */
  const $form = questionKeys.reduce((obj: IConditions, key: string) => {
    obj[key] = '';
    return obj;
  }, {});

  const [form, setform] = useState<IConditions>($form); // 表单数据
  const [availableList, setAvailableList] = useState<IItem[]>([]); //可用的协议

  useEffect(() => {
    // 没有配置答案的 忽略 是和否都可以
    const list = rawData.protocol.filter((item => {
      //已配置的条件 id
      const keys = Object.keys(item.conditionsConfig || {});
      // 是否有反对项
      const oppose = keys.some(key => form[key] && item.conditionsConfig[key] && form[key] !== item.conditionsConfig[key])
      return !oppose
    }))
    setAvailableList(list);
  }, [form]);
                                                                                                                                                                                                                           
  return (
    <div className={styles.main}>
      <h3 className={styles.header}>开源协议选择</h3>
      <a className={styles.fr} href="https://atomgit.com/atomgit_dev/os-protocol-selector">参与贡献</a>
      <p className={`clearfix ${styles.tip}`}>只需完成下列选择题，我们帮你规划出合适您的开源协议</p>
      <br />
      <Form>
        {questionKeys.map(
          (strKey: string, index: number) => (
            <Form.Item
              key={index}
              name={strKey}
              label={<span>{/** 根据key展示描述 */rawData.conditions[strKey]} </span>}
              requiredMessage="请选择!"
            >
              <RadioGroup
                value={form[strKey]}
                onChange={(value) => {
                  form[strKey] = value as string;
                  setform(Object.assign({}, form))
                }}
              >
                <Radio
                  value="1"
                  onClick={() => {
                    // 点击重置
                    if (form[strKey] === '1') {
                      form[strKey] = '';
                      setform(Object.assign({}, form))
                    }
                  }}>是</Radio>
                <Radio
                  value="0"
                  onClick={() => {
                    // 点击重置
                    if (form[strKey] === '0') {
                      form[strKey] = '';
                      setform(Object.assign({}, form))
                    }
                  }}>否</Radio>
              </RadioGroup>
            </Form.Item>
          )
        )}
      </Form>
      <p className={styles.tip}>您有下列协议可用</p>
      <Card free className={`clearfix ${styles.noHoverShadow}`} style={{ padding: 20 }} >
        <Box >
          {availableList.map((item, index) => (
            <Box key={index}>
              <Card free className={styles.noHoverShadow}>
                <Box direction="row" justify="space-between" align="center" padding={[20, 10]}>
                  <h6>{item['name']} {item['version']}</h6>
                  <Box direction="row" align="center" wrap spacing={[10, 40]}>
                    <a href={item.href}>查看协议</a>
                    {/* <a href="">下载协议</a>
                    <a href=""><Icon type="copy" />复制</a> */}
                  </Box>
                </Box>
              </Card>
            </Box>
          ))}
        </Box>
        <a className={styles.frTxt} href="https://atomgit.com/atomgit_dev/os-protocol-selector/blob/master/src/protocol">没有合适的许可证？你可以参与共同丰富协议库</a>
      </Card>
    </div>
  );
}

export default ProtocolSelect;
